<template>
  <view>
    <text class="phoneTitle">手机认证</text>
    <view class="phonebox">
      <text class="agreeLogo" :style="`background: ${phone?'#3cb950':'#ccc'}`">已认证</text>
      <text class="phone">{{ `${String(phoneProps).slice(0, 3)}****${String(phoneProps).slice(7, 11)}`}}</text>
    </view>
  </view>

  <view class="message">
    <!-- 自定义组件进行传值 -->
    <SwkInput leftText="icon-shouji" placeholder="请输入其他手机号" :value="phone" :changeInput="changePhone"></SwkInput>
    <!-- 自定义组件进行传值 -->
    <SwkInput leftText="icon-yanzhengma" placeholder="请输入验证码" :rightFlag="true" :value="code" :changeInput="changeInput"
      :sendCode="sendCode" :flag="flag" :changeState="changeState"></SwkInput>
  </view>

  <button class="submitBtn" :disabled="phone && code ? false : true" @click="submit">提交认证</button>
</template>

<script setup lang="ts">
// 导入自定义输入框组件
import SwkInput from '@/components/SwkInput.vue'
import { ref } from 'vue'
import { postPhoneComfirmAPI, postSendCodePhoneAPI } from '@/services/my'
import { useUserComfirmInfo } from '@/stores/index'
import { storeToRefs } from 'pinia'
const useUserComfirmProps = useUserComfirmInfo()
//pinia数据
const { id,phone } = storeToRefs(useUserComfirmProps)
const phoneProps = phone.value
const code = ref<string>('') //验证码
//修改验证码
const changeInput = (e: Event) => {
  code.value = e.target?.value
}
//修改手机号
const changePhone = (e: Event) => {
  phone.value = e.target?.value
}
//发送验证码
const flag = ref<boolean>(false)
const changeState = () => {
  flag.value = !flag.value
}
const sendCode = async () => {
  //判断手机号是否为空
  if (phone.value == '') {
    flag.value = false
    uni.showToast({
      title: '请输入手机号',
      icon: 'error'
    })
    return
  }
  const reg = /^1[3-9]\d{9}$/
  if (!reg.test(phone.value)) {
    flag.value = false
    uni.showToast({
      title: '手机号格式不对',
      icon: 'error'
    })
    return
  }
  let res = await postSendCodePhoneAPI({ id: id.value, phone: phone.value })
  if(res.code == '400'){
    flag.value = false
  }
  uni.showToast({
    title: res.msg,
    icon: res.code == '200' ? 'success' : 'error'
  })

  return res


}
//提交数据
const submit = () => {
  if (phone.value == '' || code.value == '') {
    return uni.showToast({
      title: '请输入信息',
      icon: 'error'
    })
  }
  const reg = /^1[3-9]\d{9}$/
  if (!reg.test(phone.value)) {
    return uni.showToast({
      title: '手机号格式不对',
      icon: 'error'
    })
  }
  if (code.value.length != 6) {
    return uni.showToast({
      title: '验证码格式不对',
      icon: 'error'
    })
  }
  postPhoneComfirmAPI({
    id: id.value,//用户id
    phone: phone.value,//手机号
    code: code.value,//验证码
  }).then(res => {
    if (res.code == '400') {
      uni.showToast({
        title:res.msg,
        icon: 'error'
      })
      code.value = ''
      return
    }
    useUserComfirmProps.getUserInfo()
    uni.showToast({
        title:res.msg,
        icon: 'success'
      })
    uni.switchTab({
      url:'/pages/my/my',
    })
  })

}
</script>

<style scoped lang="scss">
.submitBtn {
  width: 80%;
  margin: 0 auto;
  background-image: linear-gradient(to right, #6fc7d5, #28abc1);
  border-radius: 1.5em;
  color: white;
}

.flex {
  display: flex;
}

.message {
  margin-bottom: 48rpx;
}

.phoneTitle {
  font-size: 48rpx;
  font-weight: 500;
  margin: 20% 0 0.5rem;
  text-align: center;
  display: block;
}

.phonebox {
  text-align: center;

  .agreeLogo {
    background: #3cb950;
    border: none;
    border-radius: 1.2em 0em 1.2em 1.2em;
    color: white;
    padding: 4rpx 20rpx;
    box-sizing: border-box;
    display: inline-block;
    font-size: 28rpx;
    margin-left: 40rpx;
  }

  .phone {
    font-size: 28rpx;
    color: #b7b6b6;
    margin-left: 20rpx;
  }
}
</style>
